﻿
@{
    ViewBag.Title = "Index";
}

<div></div>
<div><table id="tree-grid"></table></div>
<div id="dialog"></div>

<script>
    $(function () {
        Init();
    });

    var recordNodes = [];

    //初始化treegrid
    function Init() {
        $("#tree-grid").treegrid({
            title: '数据字典',
            url: "/Base/BaseMenu/GetList",
            idField: "Id",
            treeField: "Title",
            toolbar: [{
                iconCls: 'icon-add',
                id: 'btnRoot',
                text: "添加根节点",
                handler: function () {
                    onAddRoot();
                }
            }, {
                iconCls: 'icon-add',
                id: "btnParallel",
                text: "添加平行节点",
                handler: function () {
                    onAddParallel();
                }
            }, {
                iconCls: 'icon-add',
                id: "btnChild",
                text: "添加子节点",
                handler: function () {
                    onAddChild();
                }
            }, {
                iconCls: 'icon-reload',
                id: "btnReload",
                text: "刷新",
                handler: function () {
                    onReloadTree();
                }
            }],
            onLoadSuccess: function () {
                //将记录已展开节点ID的数组容器转存到另一个数组容器中
                var list = [];
                for (var j = 0; j < recordNodes.length; j++) {
                    list.push(recordNodes[j]);
                }
                //这里必须将已记录的节点转存到另一个数组中,
                //因为执行collapseAll方法后,会触发onBeforeCollapse事件
                //会清空已记录的节点数据
                $("#tree-grid").treegrid("collapseAll");
                for (var i = 0; i < list.length; i++) {
                    $('#tree-grid').treegrid('expand', list[i]);
                }
            },
            onBeforeExpand: function (node) {
                //每次执行展开一个节点的操作时
                //记录被展开的节点ID
                if ($.inArray(node.Id.toString(), recordNodes) < 0) {
                    recordNodes.push(node.Id.toString());
                }
            },
            onBeforeCollapse: function (node) {
                //每次执行折叠一个节点的操作时
                //数组容器去除被折叠的节点ID
                var i = recordNodes.indexOf(node.Id.toString());
                if (i >= 0) {
                    recordNodes.splice(i, 1);
                }
            },
            columns: [[
                { field: 'Title', title: '名称', width: 150 },
                { field: 'Sym', title: '编号', width: 100, align: 'left' },
                { field: 'UrlAddress', title: 'Url地址', width: 80 },
                { field: 'IocName', title: '图标名称', width: 80 },
                { field: 'Value', title: '取值', width: 40, align: "center" },
                {
                    field: 'Enable', title: '是否启用', width: 50, align: "center", formatter: function (v) {
                        return v == 1 ? "是" : "否";
                    }
                },
                //{ field: 'Remark', title: '备注', width: 80 },
                { field: 'ParentName', title: '父节点名称', width: 80 },
                { field: 'PathName', title: '父节点路径', width: 80 },
                {
                    field: 'IsLeaf', title: '是否子叶', width: 50, align: "center", formatter: function (v, r, i) {
                        return v == 0 ? "是" : "否";
                    }
                },
                {
                    field: 'CreateDate', title: '创建时间', width: 100, formatter: function (v, r, i) {
                        return ConvertToJsonDateTime(v);
                    }
                },
                {
                    field: 'Id', title: '操作', width: 150, align: "center", formatter: function (v, r, i) {
                        var s = "<a href='javascript:onLook(" + v + ")' >查看</a>&nbsp;&nbsp;";
                        s += "<a href='javascript:onEdit(" + v + ")' >编辑</a>&nbsp;&nbsp;";
                        s += "<a href='javascript:onDelete(" + v + ")' >删除</a>&nbsp;&nbsp;";
                        s += "<a href='javascript:onUp(" + v + ")' >上移</a>&nbsp;&nbsp;";
                        s += "<a href='javascript:onDown(" + v + ")' >下移</a>";

                        return s;
                    }
                }
            ]]
        });
    }


    //根
    function onAddRoot() {
        var href = "/Base/BaseMenu/Add?AddType=1";
        openDialog({ title: "添加根节点", href: href });
    }

    //平行
    function onAddParallel() {
        if (getSelectTreeRow()) {
            var row = getSelectTreeRow();
            openDialog({ title: "添加平行节点", href: "/Base/BaseMenu/Add?AddType=2" });
        };
    }

    //子
    function onAddChild() {
        if (getSelectTreeRow()) {
            var row = getSelectTreeRow();
            openDialog({ title: "添加子节点", href: "/Base/BaseMenu/Add?AddType=3" });
        }
    }


    function onReloadTree() {
        $("#tree-grid").treegrid("reload");
        console.log(recordNodes);
    }


    function openDialog(opt) {
        $('#dialog').dialog({
            title: opt.title,
            width: 700,
            height: 500,
            closed: false,
            closable: true,
            cache: false,
            href: opt.href,
            modal: true,
            onLoad: function () {
                InitChild();
            },
            buttons: [{
                text: '保存',
                iconCls: 'icon-ok',
                id: 'dialogBtnOK',
                handler: function () {
                    onSaveTree();
                }
            }, {
                text: '关闭',
                iconCls: 'icon-cancel',
                id: 'dialogBtnCancel',
                handler: function () {
                    onClose();
                }
            }]
        });


        function onSaveTree() {
            $("#mainForm").form('submit',
                {
                    url: $("#mainForm").attr("action"),
                    onSubmit: function () {
                        var isValid = $(this).form('validate');
                        if (!isValid) {
                            $.messager.progress('close');	// 如果表单是无效的则隐藏进度条
                        }
                        return isValid;	// 返回false终止表单提交
                    },
                    success: function (d) {
                        $.messager.progress('close');	// 如果提交成功则隐藏进度条
                        var data = JSON.parse(d);
                        if (data.Success) {
                            onReloadTree();
                            $("#dialog").dialog("close");
                        } else {
                            $.messager.alert("提示信息", "保存失败!");
                        }
                    }
                });
        }
    }


    function getSelectTreeRow() {
        var row = $("#tree-grid").treegrid("getSelected");
        if (row != null) {
            return row;
        } else {
            $.messager.alert("提示信息", "请选择一行数据!");
        }
    }


    function onLook(v) {
        var href = "/Base/BaseMenu/Edit?Id=" + v + "";
        openDialog({ title: "数据字典查看", href: href });
        $("#dialogBtnOK").hide();
    }

    function onEdit(v) {
        var href = "/Base/BaseMenu/Edit?Id=" + v + "";
        openDialog({ title: "数据字典查看", href: href });
    }

    function onDelete(v) {
        $.messager.confirm("提示信息", "您确定要删除该数据吗?", function (d) {
            if (d) {
                $.post("/Base/BaseMenu/Delete", { Id: v },
                    function (data, textStatus, jqXHR) {
                        if (data.Success) {
                            onReloadTree();
                        }
                        else {
                            $.messager.alert("提示信息", "删除失败!");
                        }
                    },
                    "json"
                );
            }
        });
    }

    function onUp(v) {
        $.messager.alert("提示信息", "上移功能!");
    }

    function onDown(v) {
        $.messager.alert("提示信息", "下移功能!");
    }

</script>

